<template>
  <div>
    <el-dialog
      title="账号注册"
      :visible.sync="dialogFormVisible"
      width="500px"
      center
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input
            v-model="form.username"
            autocomplete="off"
            placeholder="请输入您的用户名"
            @keyup.enter.native="Reg()"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input
            v-model="form.tel"
            autocomplete="off"
            placeholder="请输入您的手机号"
            @keyup.enter.native="Reg()"
          ></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="16">
            <el-form-item label="验证码" :label-width="formLabelWidth">
              <el-input
                v-model="form.code"
                autocomplete="off"
                placeholder="请输入您的验证码"
                @keyup.enter.native="Reg()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="text-align: right">
            <el-button type="primary" @click="gainCode">{{ time }}</el-button>
          </el-col>
        </el-row>
        <el-form-item label="企业名" :label-width="formLabelWidth">
          <el-input
            v-model="form.entname"
            autocomplete="off"
            placeholder="请输入您的企业名"
            @keyup.enter.native="Reg()"
          ></el-input>
        </el-form-item>
        <el-form-item label="登录密码" :label-width="formLabelWidth">
          <el-input
            v-model="form.loginpwd"
            autocomplete="off"
            show-password
            placeholder="请输入您的密码"
            @keyup.enter.native="Reg()"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="CancelReg()">取 消</el-button>
        <el-button type="primary" @click="Reg()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Reg",
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // dialogFormVisible: false,
      isClick: true,
      form: {
        username: "",
        tel: "",
        code: "",
        entname: "",
        loginpwd: "",
      },
      initPhoto: require("../assets/images/init.png"),
      time: "获取验证码",
      formLabelWidth: "80px",
    };
  },
  methods: {
    CancelReg() {
      this.$emit("closepop");
    },
    async gainCode() {
      if (this.isClick) {
        if (
          /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
            this.form.tel
          )
        ) {
          let res = await this.sendVerifyCode(this.form.tel); // 获取验证码接口
          // console.log(res);
          this.isClick = false;
          let s = 60;
          this.time = s + "s";
          let interval = setInterval(() => {
            s--;
            this.time = s + "s";
            if (s < 0) {
              this.time = "重新获取";
              this.isClick = true;
              clearInterval(interval);
            }
          }, 1000);
        } else {
          this.$message({
            message: "请输入正确的手机号码！",
            type: "warning",
          });
        }
      }
    },
    sendVerifyCode(phone) {
      this.$axios({
        url: "/User/SendTelMsgPcReg",
        method: "post",
        data: {
          tel: phone,
        },
        transformRequest: [
          function (data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          },
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
      })
        .then((res) => {
          // console.log(res.data.data);
          // console.log(this.IsCollect);
          if (res.data.status == -10003) {
            this.$message({
              message: "该手机号已被注册，请更换手机号重新注册！",
              type: "warning",
            });
          }
          return res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    Reg() {
      if (!this.form.username) {
        this.$message({
          message: "用户名不能为空",
          type: "warning",
        });
        return false;
      }
      if (!this.form.tel) {
        this.$message({
          message: "手机号不能为空",
          type: "warning",
        });
        return false;
      }
      if (!this.form.code) {
        this.$message({
          message: "验证码不能为空",
          type: "warning",
        });
        return false;
      }
      if (!this.form.entname) {
        this.$message({
          message: "企业名不能为空",
          type: "warning",
        });
        return false;
      }
      if (!this.form.loginpwd) {
        this.$message({
          message: "密码不能为空",
          type: "warning",
        });
        return false;
      }
      this.$axios({
        url: "/User/UserRegByPc",
        method: "post",
        data: {
          username: this.form.username,
          tel: this.form.tel,
          code: this.form.code,
          entname: this.form.entname,
          loginpwd: this.form.loginpwd,
        },
        transformRequest: [
          function (data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          },
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
      })
        .then((res) => {
          console.log(res);
          if (res.data.status == -10003) {
            this.$message({
              message: "注册失败，请重新注册",
              type: "error",
            });
            this.form = {
              username: "",
              tel: "",
              code: "",
              entname: "",
              loginpwd: "",
            };
            return false;
          }
          if (res.data.status == 1) {
            this.$message({
              message: "注册成功",
              type: "success",
            });
            if (!res.data.data[0].Photo) {
              res.data.data[0].Photo = this.initPhoto;
            }
            setTimeout(() => {
              this.$cookies.set("userdata", res.data.data[0].UserData);
              this.$cookies.set("userinfo", res.data.data[0]);
              this.$emit("closepop");
              this.$router.go(0);
            }, 500);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style></style>
